<template>
  <div class="container">
    <button @click="testToast(1)">打开Toast</button>
    <button @click="testToast(2)">关闭Toast</button>
    <div>
      <SvgIcon name="test" class="test"></SvgIcon>
    </div>
    <WzChart width="1000px" height="500px" :options="options"></WzChart>
    <button @click="handleChange">改变</button>
  </div>
</template>

<script setup>
import { configInfo } from '@/api'
import MToast from '@/components/MToast'
import WzChart from '@/components/WzChart.vue'
import {getCurrentInstance, onMounted, ref} from 'vue'
onMounted(async () => {
  const res = await configInfo()
  console.log(res, 'res')
})
const currentInstance = getCurrentInstance()
function testToast(type) {
  // MToast.show('显示')
  if(type===1){
    currentInstance.appContext.config.globalProperties.$showToast('显示')
  }else {
    currentInstance.appContext.config.globalProperties.$hideToast()
  }

  console.log()
}
const options = ref({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
})

function handleChange() {
  options.value.xAxis.data = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  options.value.series[0].data = [1, 2, 3, 4, 5, 6, 7]
}
</script>

<style lang="scss" scoped>
.container{
  display: flex;
  flex-direction: column;
  .test {
    font-size: 50px;
    color: green;
  }
}

</style>
